<template>
  <div class="flex flex-col gap-y-4">
    <div
      v-if="!success"
      class="license-info failed"
      :class="{ platform: source === 2 }">
      <div class="flex flex gap-x-2 truncate">
        <i-icons-failed class="flex-shrink-0 mt-1" />
        <span class="flex gap-x-4 text-danger leading-22px truncate">
          <span class="font-bold">证书申请失败</span>
          <span class="cursor-pointer" @click="openError">查看原因</span>
        </span>
      </div>
    </div>
    <div
      v-if="Number(certInfo?.expired_at) > 0"
      class="license-info"
      :class="{ failed: isExpired, platform: source === 2 }">
      <div class="flex flex-col gap-y-4">
        <div
          v-if="source === 1"
          class="flex items-center gap-x-1 text-success font-bold">
          <i-icons-success />
          已上传证书
        </div>
        <div
          v-if="Number(certInfo?.expired_at) > 0"
          class="flex gap-x-8 items-center leading-22px h-22px">
          <span class="flex gap-x-4">
            <span class="text-4">证书品牌</span>
            <span class="text-2">{{ certInfo?.brand ?? '' }}</span>
          </span>
          <span class="flex leading-22px">
            <span class="text-4 mr-4">到期时间</span>
            <span class="text-2">{{ formatUnix(certInfo?.expired_at) }}</span>
            <a-tag v-if="isExpired" color="#F53F3F" class="system-tag"
              >已过期</a-tag
            >
          </span>
        </div>
      </div>
      <div v-if="source === 1" class="view-info">
        <a-tooltip content="查看证书">
          <div
            class="w-8 h-8 p-2 bg-fill-4 hover:bg-opacity-8 rounded-50% cursor-pointer"
            @click="open">
            <i-icons-view-info />
          </div>
        </a-tooltip>
        <a-tooltip content="替换证书">
          <div
            class="w-8 h-8 p-2 bg-fill-4 hover:bg-opacity-8 rounded-50% cursor-pointer"
            @click="openUpload">
            <i-icons-re-upload />
          </div>
        </a-tooltip>
      </div>
      <LicenseDetails
        v-model="visible"
        :cert-id="certId"
        :source="source"></LicenseDetails>
    </div>
    <ErrorMsgDialog
      v-model="errorVisible"
      :error-text="certInfo?.error_msg ?? ''"></ErrorMsgDialog>
  </div>
</template>
<script lang="ts" setup>
import { formatUnix } from '@/utils'
import ErrorMsgDialog from './ErrorMsgDialog.vue'
interface IProps {
  source: number
}
const props = withDefaults(defineProps<IProps>(), {})
const info = inject(licenseInfoKey)
const openUpload = inject(uploadLicenseKey)
const { visible: errorVisible, open: openError } = usePopup()
const certInfo = computed(() => {
  if (props.source === 1) {
    return info?.value?.manual_cert
  }
  return info?.value?.platform_cert
})

const certId = computed(
  () =>
    (props.source === 1
      ? info?.value?.site_cert?.manual_cert_id
      : info?.value?.site_cert?.platform_cert_id) ?? ''
)
// 证书是否到期
const isExpired = computed(() => {
  const time1 = Math.floor(Date.now() / 1000)
  const time2 =
    props.source === 1
      ? info?.value?.manual_cert?.expired_at ?? 0
      : info?.value?.platform_cert?.expired_at ?? 0
  return time1 > time2
})
const success = computed(() => !certInfo.value?.error_msg)
const { visible, open } = usePopup()
</script>
<style lang="less" scoped>
.license-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 94;
  padding: 16px;
  border-radius: 4px;
  border: 1px solid var(---color-border-1, #f3f4f7);
  background: var(
    ---gradient-green-1,
    linear-gradient(180deg, rgba(0, 180, 42, 0.06) 0%, rgba(0, 180, 42, 0) 100%)
  );
  &.platform {
    height: 54px;
  }
  .expired-tag {
    height: 20px;
    border-radius: 8px 1px;
    padding: 2px 6px;
    margin-left: 4px;
  }
  &.failed {
    border: 1px solid var(---color-border-1, #f3f4f7);
    background: var(
      ---gradient-red-1,
      linear-gradient(
        180deg,
        rgba(245, 63, 63, 0.06) 0%,
        rgba(245, 63, 63, 0) 100%
      )
    );
  }
  .view-info {
    @apply flex gap-x-4;
  }
}
</style>
